<template>
  <div class="videoplay-content">
    <div class="left" @click="toLoop('l')">
      <el-icon><ArrowLeft /></el-icon>
    </div>
    <div class="right" @click="toLoop('r')">
      <el-icon><ArrowRight /></el-icon>
    </div>
    <div class="right-top-box">
      <!-- {{ allSence }} -->
      <el-select
        v-model="currentActiveSence"
        style="width: 240px"
        class="custom-top-select"
        placement="top"
        popper-class="custom-top-popper"
        :popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
      >
        <el-option
          v-for="item in setSelectList"
          :key="item.key"
          :label="item.name"
          :value="item.key"
        />
      </el-select>
    </div>
    <div class="video-content" v-if="playList[currentIndex]">
      <!-- 单场景 -->
      <div class="out-box one">
        <p class="name-device">
          {{ playList[currentIndex] && playList[currentIndex].type ? playList[currentIndex].type : ""
          }}{{ playList.length + '-' + (currentIndex + 1) }}
        </p>
        <div
          class="video-box"
          style="
            width: 100%;
            height: 100%;
            position: relative;
            background: rgba(142, 191, 255, 0.32);
            border-radius: 12px;
          "
        >
          <videoRtsp
            v-if="playList[currentIndex].originDeviceCode"
            :showToolbar="0"
            :width="1575"
            :height="680"
            :vid="playList[currentIndex].originDeviceCode"
          >
          </videoRtsp>
          <div class="empty" v-else>
            <img src="@/assets/images/novideo.png" />
            <p>暂无视频</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getSenceList } from "@/api/common.js";
import VideoRtsp from "@/components/video/videoRtsp.vue";
import { watch } from "vue";
let currentActiveSence = ref("");
let allData = ref([]);
let allSence = ref({}); //所有的场景
let pointList = ref({});
let currentIndex = ref(0); //用于判断当前是第一轮数据
let setSelectList = ref([]);
let playList = ref([]);
const setSelectListFun = () => {
  try {
    let output = Object.entries(allSence.value).map(([key, list]) => ({
      key,
      list,
      name: list[0].type || key, // 使用场景名称或场景代码作为名称
    }));
    setSelectList.value = output;
    currentActiveSence.value = output[0].key; // 默认选中第一个场景
  } catch (e) {
    console.error(e);
  }
};

// 获取数据
const getData = async () => {
  try {
    let { data } = await getSenceList({});
    let list = data.senceCameras;
    let obj = {};
    for (let i = 0; i < list.length; i++) {
      if (obj[list[i].sceneCode]) {
        obj[list[i].sceneCode].push(list[i]);
      } else {
        obj[list[i].sceneCode] = [];
        obj[list[i].sceneCode].push(list[i]);
      }
    }
    allData.value = list;
    allSence.value = obj;
    setSelectListFun();
  } catch (e) {
    console.error(e);
  }
};

watch(currentActiveSence, (newval) => {
  // 当当前选中的场景发生变化时，更新播放列表
  currentIndex.value = 0; // 重置索引
  playList.value =
    setSelectList.value.filter((item) => item.key === newval)[0].list || [];
});

// 切换视频点位
const toLoop = (type) => {
  if (type == "l") {
    if (currentIndex.value > 0) {
      currentIndex.value--;
    } else {
      currentIndex.value = playList.value.length - 1; // 回到最后一个
    }
  } else {
    if (currentIndex.value < playList.value.length - 1) {
      currentIndex.value++;
    } else {
      currentIndex.value = 0; // 回到第一个
    }
  }
};

// 在组件挂载时调用getData初始化数据
onMounted(() => {
  getData();
});
</script>
<style lang="scss" >
/* 仅作用于带 custom-top-popper 类的下拉框 */
.custom-top-popper .el-select-dropdown__list {
  max-height: 80px !important;
  overflow-y: auto !important;
}
</style>
<style lang="scss" scoped>
.videoplay-content {
  width: 100%;
  height: 100%;
  // width: 1660px;
  // height: 797px;
  padding: 28px 50px;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
  border-radius: 12px;
  position: relative;
  padding-top: 48px;
  .left {
    width: 50px;
    height: 60px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #858c9b;
    cursor: pointer;
    color: #fff;
    line-height: 64px;
    text-align: center;
    font-size: 30px;
    border-radius: 50% 0 0 50%;
    &:hover {
      background: #249fff;
    }
  }
  .right {
    width: 50px;
    height: 60px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #858c9b;
    cursor: pointer;
    color: #fff;
    line-height: 64px;
    text-align: center;
    font-size: 30px;
    border-radius: 0% 50% 50% 0;
    &:hover {
      background: #249fff;
    }
  }
  .out-box {
    position: relative;
    &.one {
      width: 100%;
      height: calc(100% - 40px);
    }
    .name-device {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      margin-bottom: 10px;
    }
  }
  .video-box-layout-4 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0;
    .out-box {
      width: calc(50% - 10px);
      height: calc(50% - 10px);
      // border: 1px solid red;
    }
    .video-box {
      width: 100%;
      height: calc(100% - 30px);
      // width: calc(50% - 20px);
      // height: calc(50% - 20px);
      background: rgba(142, 191, 255, 0.32);
      position: relative;
    }
  }
  .video-box-layout-6 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .out-box {
      width: calc(33% - 10px);
      height: calc(50% - 10px);
      // border: 1px solid red;
    }
    .video-box {
      width: 100%;
      height: calc(100% - 30px);
      background: rgba(142, 191, 255, 0.32);
      position: relative;
    }
  }
  .video-box-layout-9 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .out-box {
      width: calc(33% - 10px);
      height: calc(33% - 10px);
      // border: 1px solid red;
    }
    .video-box {
      width: 100%;
      height: calc(100% - 30px);
      background: rgba(142, 191, 255, 0.32);
      position: relative;
    }
  }
  .empty {
    width: 120px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #2263bf;
    text-align: center;
  }
  .video-content {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .right-top-box {
    position: absolute;
    right: 64px;
    top: 20px;
    display: flex;
    align-items: center;
    .one,
    .more {
      width: 36px;
      height: 36px;
      cursor: pointer;
      margin-left: 16px;
      &.active {
        background: rgba(142, 191, 255, 0.32);
        border-radius: 4px;
        border: 1px solid rgba(44, 132, 255, 0.3);
        .icon {
          background: #2263bf !important;
        }
      }
    }
    .one {
      padding: 7px;
      .icon {
        width: 22px;
        height: 22px;
        background: #9ac4ff;
      }
    }
    .more {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 7px;
      gap: 4px;
      &.l4 {
        .icon {
          width: 40%;
          height: 40%;
          background: #9ac4ff;
        }
      }
      &.l6 {
        padding: 4px;
        gap: 2px;
        .icon {
          width: 20%;
          height: 40%;
          background: #9ac4ff;
        }
      }
      &.l9 {
        padding: 4px;
        gap: 2px;
        .icon {
          width: 20%;
          height: 20%;
          background: #9ac4ff;
        }
      }
    }
  }
}
</style>
